<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>商家信息</p>
	  </header>
  
	  <!-- 商家logo部分 -->
	  <div class="business-logo">
		<img :src="business.businessImg" />
	  </div>
  
	  <!-- 商家信息部分 -->
	  <div class="business-info">
		<h1>{{ business.businessName }}</h1>
		<p>
		  &#165;{{ business.starPrice }}起送 &#165;{{
			business.deliveryPrice
		  }}配送
		</p>
		<p>{{ business.businessExplain }}</p>
	  </div>
  
	  <!-- 食品列表部分 -->
	  <ul class="food">
		<li v-for="(item, index) in foodArr" :key="item.foodId">
		  <div class="food-left">
			<img :src="item.foodImg" />
			<div class="food-left-info">
			  <h3>{{ item.foodName }}</h3>
			  <p>{{ item.foodExplain }}</p>
			  <p>&#165;{{ item.foodPrice }}</p>
			</div>
		  </div>
		  <div class="food-right">
			<div>
			  <i
				class="fa fa-minus-circle"
				@click="minus(index)"
				v-show="item.quantity != 0"
			  ></i>
			</div>
			<p>
			  <span v-show="item.quantity != 0">{{ item.quantity }}</span>
			</p>
			<div>
			  <i class="fa fa-plus-circle" @click="add(index)"></i>
			</div>
		  </div>
		</li>
	  </ul>
  
	  <!-- 购物车部分 -->
	  <div class="cart">
		<div class="cart-left">
		  <div
			class="cart-left-icon"
			:style="
			  totalQuantity == 0
				? 'background-color:#505051;'
				: 'background-color:#3190E8;'
			"
		  >
			<i class="fa fa-shopping-cart"></i>
			<div class="cart-left-icon-quantity" v-show="totalQuantity != 0">
			  {{ totalQuantity }}
			</div>
		  </div>
		  <div class="cart-left-info">
			<p>&#165;{{ totalPrice }}</p>
			<p>另需配送费{{ business.deliveryPrice }}元</p>
		  </div>
		</div>
		<div class="cart-right">
		  <!-- 不够起送费 -->
		  <div
			class="cart-right-item"
			v-show="totalSettle < business.starPrice"
			style="background-color: #535356; cursor: default"
		  >
			&#165;{{ business.starPrice }}起送
		  </div>
		  <!-- 达到起送费 -->
		  <div
			class="cart-right-item"
			@click="toOrder"
			v-show="totalSettle >= business.starPrice"
		  >
			去结算
		  </div>
		</div>
	  </div>
	</div>
  </template>
  
  <script setup>
  import qs from "qs";
  import { useRouter, useRoute } from "vue-router";
  import { ref, inject, computed } from "vue";
  import { getSessionStorage } from "../common.js";
  
  const axios = inject("axios");
  const router = useRouter();
  const route = useRoute();
  
  const user = getSessionStorage("user");
  const businessId = route.query.businessId;
  const business = ref({});
  const foodArr = ref([]);
  
  //计算属性
  //食品总价格
  const totalPrice = computed(() => {
	let total = 0;
	for (let item of foodArr.value) {
	  total += item.foodPrice * item.quantity;
	}
	return total;
  });
  
  //食品总数量
  const totalQuantity = computed(() => {
	let quantity = 0;
	for (let item of foodArr.value) {
	  quantity += item.quantity;
	}
	return quantity;
  });
  
  //结算总价格
  const totalSettle = computed(() => {
	//注意：js中调用计算属性时也需要加value属性
	return totalPrice.value + business.value.deliveryPrice;
  });
  
  const init = () => {
	//根据businessId查询商家信息
	axios
	  .post(
		"BusinessController/getBusinessById",
		qs.stringify({
		  businessId: businessId,
		})
	  )
	  .then((response) => {
		business.value = response.data;
	  })
	  .catch((error) => {
		console.error(error);
	  });
  
	//根据businessId查询所属食品信息
	axios
	  .post(
		"FoodController/listFoodByBusinessId",
		qs.stringify({
		  businessId: businessId,
		})
	  )
	  .then((response) => {
		let arr = response.data;
  
		for (let i = 0; i < arr.length; i++) {
		  arr[i].quantity = 0;
		}
		foodArr.value = arr;
  
		//如果已登录，那么需要去查询购物车中是否已经选购了某个食品
		if (user != null) {
		  listCart();
		}
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  init();
  
  const listCart = () => {
	axios
	  .post(
		"CartController/listCart",
		qs.stringify({
		  businessId: businessId,
		  userId: user.userId,
		})
	  )
	  .then((response) => {
		let cartArr = response.data;
		//遍历所有食品列表
		for (let foodItem of foodArr.value) {
		  foodItem.quantity = 0;
		  for (let cartItem of cartArr) {
			if (cartItem.foodId == foodItem.foodId) {
			  foodItem.quantity = cartItem.quantity;
			}
		  }
		}
		//this.foodArr.sort();
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  
  const add = (index) => {
	//首先做登录验证
	if (user == null) {
	  router.push({ path: "/login" });
	  return;
	}
  
	if (foodArr.value[index].quantity == 0) {
	  //做insert
	  savaCart(index);
	} else {
	  //做update
	  updateCart(index, 1);
	}
  };
  
  const minus = (index) => {
	//首先做登录验证
	if (user == null) {
	  router.push({ path: "/login" });
	  return;
	}
  
	if (foodArr.value[index].quantity > 1) {
	  //做update
	  updateCart(index, -1);
	} else {
	  //做delete
	  removeCart(index);
	}
  };
  
  const savaCart = (index) => {
	axios
	  .post(
		"CartController/saveCart",
		qs.stringify({
		  businessId: businessId,
		  userId: user.userId,
		  foodId: foodArr.value[index].foodId,
		})
	  )
	  .then((response) => {
		if (response.data == 1) {
		  //此食品数量要更新为1；
		  foodArr.value[index].quantity = 1;
		  //this.foodArr.sort();
		} else {
		  alert("向购物车中添加食品失败！");
		}
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  
  const updateCart = (index, num) => {
	axios
	  .post(
		"CartController/updateCart",
		qs.stringify({
		  businessId: businessId,
		  userId: user.userId,
		  foodId: foodArr.value[index].foodId,
		  quantity: foodArr.value[index].quantity + num,
		})
	  )
	  .then((response) => {
		if (response.data == 1) {
		  //此食品数量要更新为1或-1；
		  foodArr.value[index].quantity += num;
		  //this.foodArr.sort();
		} else {
		  alert("向购物车中更新食品失败！");
		}
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  
  const removeCart = (index) => {
	axios
	  .post(
		"CartController/removeCart",
		qs.stringify({
		  businessId: businessId,
		  userId: user.userId,
		  foodId: foodArr.value[index].foodId,
		})
	  )
	  .then((response) => {
		if (response.data == 1) {
		  //此食品数量要更新为0；视图的减号和数量要消失
		  foodArr.value[index].quantity = 0;
		  //this.foodArr.sort();
		} else {
		  alert("从购物车中删除食品失败！");
		}
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  
  const toOrder = () => {
	router.push({
	  path: "/orders",
	  query: { businessId: business.value.businessId },
	});
  };
  
  /*
  export default {
	name: "BusinessInfo",
	data() {
	  return {
		businessId: this.$route.query.businessId,
		business: {},
		foodArr: [],
		user: {},
	  };
	},
	methods: {
	  listCart() {
		this.$axios
		  .post(
			"CartController/listCart",
			this.$qs.stringify({
			  businessId: this.businessId,
			  userId: this.user.userId,
			})
		  )
		  .then((response) => {
			let cartArr = response.data;
			//遍历所有食品列表
			for (let foodItem of this.foodArr) {
			  foodItem.quantity = 0;
			  for (let cartItem of cartArr) {
				if (cartItem.foodId == foodItem.foodId) {
				  foodItem.quantity = cartItem.quantity;
				}
			  }
			}
			this.foodArr.sort();
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  },
	  add(index) {
		//首先做登录验证
		if (this.user == null) {
		  this.$router.push({ path: "/login" });
		  return;
		}
  
		if (this.foodArr[index].quantity == 0) {
		  //做insert
		  this.savaCart(index);
		} else {
		  //做update
		  this.updateCart(index, 1);
		}
	  },
	  minus(index) {
		//首先做登录验证
		if (this.user == null) {
		  this.$router.push({ path: "/login" });
		  return;
		}
  
		if (this.foodArr[index].quantity > 1) {
		  //做update
		  this.updateCart(index, -1);
		} else {
		  //做delete
		  this.removeCart(index);
		}
	  },
	  savaCart(index) {
		this.$axios
		  .post(
			"CartController/saveCart",
			this.$qs.stringify({
			  businessId: this.businessId,
			  userId: this.user.userId,
			  foodId: this.foodArr[index].foodId,
			})
		  )
		  .then((response) => {
			if (response.data == 1) {
			  //此食品数量要更新为1；
			  this.foodArr[index].quantity = 1;
			  this.foodArr.sort();
			} else {
			  alert("向购物车中添加食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  },
	  updateCart(index, num) {
		this.$axios
		  .post(
			"CartController/updateCart",
			this.$qs.stringify({
			  businessId: this.businessId,
			  userId: this.user.userId,
			  foodId: this.foodArr[index].foodId,
			  quantity: this.foodArr[index].quantity + num,
			})
		  )
		  .then((response) => {
			if (response.data == 1) {
			  //此食品数量要更新为1或-1；
			  this.foodArr[index].quantity += num;
			  this.foodArr.sort();
			} else {
			  alert("向购物车中更新食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  },
	  removeCart(index) {
		this.$axios
		  .post(
			"CartController/removeCart",
			this.$qs.stringify({
			  businessId: this.businessId,
			  userId: this.user.userId,
			  foodId: this.foodArr[index].foodId,
			})
		  )
		  .then((response) => {
			if (response.data == 1) {
			  //此食品数量要更新为0；视图的减号和数量要消失
			  this.foodArr[index].quantity = 0;
			  this.foodArr.sort();
			} else {
			  alert("从购物车中删除食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  },
	  toOrder() {
		this.$router.push({
		  path: "/orders",
		  query: { businessId: this.business.businessId },
		});
	  },
	},
	computed: {
	  //食品总价格
	  totalPrice() {
		let total = 0;
		for (let item of this.foodArr) {
		  total += item.foodPrice * item.quantity;
		}
		return total;
	  },
	  //食品总数量
	  totalQuantity() {
		let quantity = 0;
		for (let item of this.foodArr) {
		  quantity += item.quantity;
		}
		return quantity;
	  },
	  //结算总价格
	  totalSettle() {
		return this.totalPrice + this.business.deliveryPrice;
	  },
	},
  };
  */
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;
  
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 商家logo部分 ******************/
  .wrapper .business-logo {
	width: 100%;
	height: 35vw;
	/*使用上外边距避开header部分*/
	margin-top: 12vw;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .wrapper .business-logo img {
	width: 40vw;
	height: 30vw;
	border-radius: 5px;
  }
  
  /****************** 商家信息部分 ******************/
  .wrapper .business-info {
	width: 100%;
	height: 20vw;
  
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }
  .wrapper .business-info h1 {
	font-size: 5vw;
  }
  .wrapper .business-info p {
	font-size: 3vw;
	color: #666;
	margin-top: 1vw;
  }
  
  /****************** 食品列表部分 ******************/
  .wrapper .food {
	width: 100%;
	/*使用下外边距避开footer部分*/
	margin-bottom: 14vw;
  }
  .wrapper .food li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	user-select: none;
  
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .wrapper .food li .food-left {
	display: flex;
	align-items: center;
  }
  .wrapper .food li .food-left img {
	width: 20vw;
	height: 20vw;
  }
  .wrapper .food li .food-left .food-left-info {
	margin-left: 3vw;
  }
  .wrapper .food li .food-left .food-left-info h3 {
	font-size: 3.8vw;
	color: #555;
  }
  .wrapper .food li .food-left .food-left-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
  }
  .wrapper .food li .food-right {
	width: 16vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .wrapper .food li .food-right .fa-minus-circle {
	font-size: 5.5vw;
	color: #999;
	cursor: pointer;
  }
  .wrapper .food li .food-right p {
	font-size: 3.6vw;
	color: #333;
  }
  .wrapper .food li .food-right .fa-plus-circle {
	font-size: 5.5vw;
	color: #0097ef;
	cursor: pointer;
  }
  
  /****************** 购物车部分 ******************/
  .wrapper .cart {
	width: 100%;
	height: 14vw;
  
	position: fixed;
	left: 0;
	bottom: 0;
  
	display: flex;
  }
  .wrapper .cart .cart-left {
	flex: 2;
	background-color: #505051;
	display: flex;
  }
  .wrapper .cart .cart-left .cart-left-icon {
	width: 16vw;
	height: 16vw;
	box-sizing: border-box;
	border: solid 1.6vw #444;
	border-radius: 8vw;
	background-color: #3190e8;
	font-size: 7vw;
	color: #fff;
  
	display: flex;
	justify-content: center;
	align-items: center;
  
	margin-top: -4vw;
	margin-left: 3vw;
  
	position: relative;
  }
  .wrapper .cart .cart-left .cart-left-icon-quantity {
	width: 5vw;
	height: 5vw;
	border-radius: 2.5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
  
	display: flex;
	justify-content: center;
	align-items: center;
  
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
  }
  .wrapper .cart .cart-left .cart-left-info p:first-child {
	font-size: 4.5vw;
	color: #fff;
	margin-top: 1vw;
  }
  .wrapper .cart .cart-left .cart-left-info p:last-child {
	font-size: 2.8vw;
	color: #aaa;
  }
  
  .wrapper .cart .cart-right {
	flex: 1;
  }
  /*达到起送费时的样式*/
  .wrapper .cart .cart-right .cart-right-item {
	width: 100%;
	height: 100%;
	background-color: #38ca73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
  /*
	  .wrapper .cart .cart-right .cart-right-item{
		  width: 100%;
		  height: 100%;
		  background-color: #535356;
		  color: #fff;
		  font-size: 4.5vw;
		  font-weight: 700;
		  user-select: none;
		  
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
	  */
  </style>